<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root" style="width:200px;height:200px;background:skyblue;border:1px green solid;"></div>
    <button>点我发送请求1</button>
    <button>点我发送请求2</button>
</body>
<script>
    // 获取到所有标签名字为button的按钮
    // 页面所在的服务：http://127.0.0.1:8098
    // ajax请求的服务：http://zhangpeiyue.com:8098
    const btns = document.querySelectorAll("button");
    btns[0].onclick = function(){
        // 1- 创建xhr实例
        const xhr = new XMLHttpRequest();
		xhr.responseType = "json";// 将响应体的数据格式设置为json对象
		// 2- 准备：请求方式get  请求地址 http://127.0.0.1:8098/info
        // 第一个参数是请求方式，第二个参数是请求地址
        xhr.open("get","/info");// http://127.0.0.1:8098/info
		// 3- 发送ajax请求
        xhr.send();
		// 4- 获取响应信息
        xhr.onload = function(){
			// 默认响应体是字符串
			// console.log("onload:当获取到响应信息后执行",xhr.response);
			// JSON字符串转为对象
			// console.log(JSON.parse(xhr.response));

            // 可以在xhr实例生成后设置responseType
			// console.log(xhr.response);
            document.querySelector("#root").innerHTML = (`
                <p>ok:${xhr.response.ok}</p>
                <p>msg:${xhr.response.msg}</p>
            `)
        }
		console.log("over")

    }
</script>
</html>